<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style id="system" type="text/css">
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #737373;
        margin: 10px 13px 10px 13px;
    }

    a {
        color: #0069d6;
    }

    a:hover {
        color: #0050a3;
        text-decoration: none;
    }

    a img {
        border: none;
    }

    p {
        margin-bottom: 9px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #404040;
        line-height: 36px;
    }

    h1 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 13px;
    }

    hr {
        margin: 0 0 19px;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    blockquote {
        padding: 13px 13px 21px 15px;
        margin-bottom: 18px;
        font-family: georgia, serif;
        font-style: italic;
    }

    blockquote:before {
        content: "C";
        font-size: 40px;
        margin-left: -10px;
        font-family: georgia, serif;
        color: #eee;
    }

    blockquote p {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        margin-bottom: 0;
        font-style: italic;
    }

    code,
    pre {
        font-family: Monaco, Andale Mono, Courier New, monospace;
    }

    code {
        background-color: #fee9cc;
        color: rgba(0, 0, 0, 0.75);
        padding: 1px 3px;
        font-size: 12px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    pre {
        display: block;
        padding: 14px;
        margin: 0 0 18px;
        line-height: 16px;
        font-size: 11px;
        border: 1px solid #d9d9d9;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    pre code {
        background-color: #fff;
        color: #737373;
        font-size: 11px;
        padding: 0;
    }

    @media screen and (min-width: 768px) {
        body {
            width: 748px;
            margin: 10px auto;
        }
    }
    </style>
    <style id="custom" type="text/css"></style>
</head>

<body marginheight="0">
    <h3>Angular oi.select</h3>
    <ul>
        <li><a href="https://github.com/tamtakoe/oi.select">https://github.com/tamtakoe/oi.select</a></li>
    </ul>
    <h3>Angular UI-Router</h3>
    <ul>
        <li><a href="http://www.tuicool.com/articles/zeiy6ff">http://www.tuicool.com/articles/zeiy6ff</a></li>
    </ul>
    <h3>Webpack知识</h3>
    <ul>
        <li><a href="http://www.cnblogs.com/sloong/p/5570774.html">http://www.cnblogs.com/sloong/p/5570774.html</a></li>
        <li><a href="http://webpack.github.io/docs/multiple-entry-points.html">http://webpack.github.io/docs/multiple-entry-points.html</a></li>
    </ul>
    <h3>bootstrap icon</h3>
    <ul>
        <li><a href="http://glyphicons.bootstrapcheatsheets.com/">http://glyphicons.bootstrapcheatsheets.com/</a></li>
        <li><a href="http://www.tutorialspoint.com/bootstrap/bootstrap_glyph_icons.htm">http://www.tutorialspoint.com/bootstrap/bootstrap_glyph_icons.htm</a></li>
    </ul>
    <h3>angular-ui-grid</h3>
    <ul>
        <li><a href="http://ui-grid.info/docs/#/tutorial">http://ui-grid.info/docs/#/tutorial</a></li>
    </ul>
    <h3>angular-toastr</h3>
    <ul>
        <li><a href="https://github.com/Foxandxss/angular-toastr">https://github.com/Foxandxss/angular-toastr</a></li>
    </ul>
    <h3>flex</h3>
    <ul>
        <li><a href="https://material.angularjs.org/latest/layout/introduction">https://material.angularjs.org/latest/layout/introduction</a></li>
    </ul>
    <h2>框架</h2>
    <h4>angular1 + webpack2 + bootstrap3 + flex</h4>
    <p><img src="./app/img/app-pic.png" alt="Alt text">
    </p>
    <pre><code>app.main.js     程序入口文件
app.config.js   配置文件
app.run.js      运行
page.module.js  页面模块
plug.module.js  插件

page            功能模块，每一个模块至少由4个部分组成(route.js、controller.js、html、less)，并且在page.module.js添加注入
directive       自定义指定放到该文件夹下，并且在directive.module.js添加注入
serve           自定义服务放到该文件夹下，并且在serve.module.js添加注入
style
img</code></pre>
    <h2>开发时注意</h2>
    <ul>
        <li>
            <p>调用后台接口需引入'IHttp'</p>
        </li>
        <li>
            <p>开发时，不需要再引入 '$state' 和 '$stateParams'，只需要引入$rootScope即可。</p>
        </li>
    </ul>
    <pre><code>    使用时：$rootScope.$state 和 $rootScope.$stateParams</code></pre>
    <ul>
        <li>文书样式，将页面私有的样式，用id选择器单独写在一个文件里。</li>
    </ul>
    <pre><code>&lt;div class="page-print" id="name"&gt;
    &lt;header layout="column" layout-align="center center"&gt;
        &lt;h3&gt;标题1&lt;/h3&gt;
        &lt;h4&gt;标题2&lt;/h4&gt;
    &lt;/header&gt;
    &lt;div layout="column"&gt;
        // 这里面任你发挥
    &lt;/div&gt;
    &lt;div class="not-print"&gt;
        &lt;button&gt;保&amp;nbsp;&amp;nbsp;存&lt;/button&gt;
        &lt;button&gt;提&amp;nbsp;&amp;nbsp;交&lt;/button&gt;
        &lt;button&gt;打&amp;nbsp;&amp;nbsp;印&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
    <ul>
        <li>
            <p>尽量使用bootstrap字体图标，链接上面有 【bootstrap icon】</p>
        </li>
        <li>
            <h3>[name].route.js</h3>
        </li>
    </ul>
    <pre><code>module.exports = angular.module('login', [])
    .config(route)
    .name;

route.$inject = ['$stateProvider'];

function route($stateProvider) {
    $stateProvider.state('login', {
        url: '/',
        template: require('./login.html'),
        less: require('./login.less'),
        controller: require('./login.controller.js')
    })
}</code></pre>
    <ul>
        <li>
            <h3>[name].controller.js</h3>
        </li>
    </ul>
    <pre><code>LoginCtrl.$inject = ['$rootScope', '$scope'];

module.exports = LoginCtrl;

function LoginCtrl($rootScope, $scope) {

}</code></pre>
    <ul>
        <li>
            <h3>[name].html</h3>
        </li>
    </ul>
    <pre><code>&lt;div flex layout="column" id="login"&gt;
    // 尽量使用flex 布局
&lt;/div&gt;</code></pre>
    <ul>
        <li>
            <h3>[name].less</h3>
        </li>
    </ul>
    <pre><code>#login {
    // 在外面包一层，所有的样式写在这里面
}</code></pre>
    <p>Edit By <a href="http://mahua.jser.me">MaHua</a></p>
</body>

</html>